.wrapper {
  overflow-x: hidden;
  background-color: #f0f3f6;
  position: relative;
  left: 0;

  transition-property: left;
  transition-timing-function: ease;
  transition-duration: 0.3s;

    /*
    * 顶部容器
    */
  .header-container {
    position: absolute;
    top: 0;
    left: 240px;
    right: 0;
    height: 60px;
    display: flex;
    align-items: stretch;
    z-index: 30;

    transition-property: left, right;
    transition-timing-function: ease;
    transition-duration: 0.3s;
  }

    /*
    * 侧边栏容器
    */
  .sidebar-container {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 240px;
    display: flex;
    z-index: 40;

    transition-property: left, width, bottom, margin-left;
    transition-timing-function: ease;
    transition-duration: 0.3s;
  }

    /*
    * 侧边栏覆盖
    */
  .sidebar-overlay {
    position: absolute;
    left: 200vw;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: 35;
    background-color: rgba(0, 0, 0, 0.1);
  }

    /*
    * 底部容器
    */
  .footer-container {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 240px;
    height: 50px;
    display: flex;
    align-items: stretch;
    z-index: 20;

    transition-property: left, bottom;
    transition-timing-function: ease;
    transition-duration: 0.3s;
  }
    /*
    * 内容容器
    */
  .content-container {
    display: flex;
    position: relative;
    padding-top: 60px;
    padding-bottom: 50px;
    margin-left: 240px;
    min-height: 100vh;
    align-items: stretch;
    //z-index: 10;

    transition-property: margin-left, padding-bottom;
    transition-timing-function: ease;
    transition-duration: 0.3s;
  }

    /*.
    content {
      width: 100%;
    }

    .customize-container {
      position: fixed;
      left: calc(-1 * 280px);
      top: 0;
      width: 280px;
      bottom: 0;
      z-index: 50;

      transition-property: left;
      transition-timing-function: ease;
      transition-duration: 0.3s;
    }

    &.-customize-open {

      left: 280px;
      overflow: hidden;

      .sidebar-container {
        margin-left: 280px;
      }

      .customize-container {
        left: 0;
      }
    }
      */


  @include media-down(sm) {

    // Defaults for mobile
    .header-container {
      left: 0;
    }

    .sidebar-container {
      left: calc(-1 * 240px);
    }

    .content-container {
      margin-left: 0;
    }

    .footer-container {
      left: calc(-1 * 240px);
    }

    // Variations
    &.-sidebar-open-mobile {
      .sidebar-container {
        left: 0;
      }
    }
  }

  @include media(md) {

    // Defaults for tablet
    .header-container {
      left: 0;
    }

    .sidebar-container {
      left: calc(-1 * 240px);
    }

    .content-container {
      margin-left: 0;
    }

    .footer-container {
      left: calc(-1 * 240px);
    }


    // Variations for tablets
      // 平板电脑
    /*&.-sidebar-compact-tablet {
      .sidebar-container {
        left: calc(-1 * 70px);
        width: 70px;
      }
    }*/

      //打开侧边栏
    &.-sidebar-open-tablet {
      .sidebar-container {
        left: 0;
      }
    }


   /* &.-sidebar-open-tablet.-sidebar-compact-tablet {
      .HeaderContainer {
        left: 70px;
      }

      .sidebar-container {
        left: 0;
      }

      .content-container {
        margin-left: 70px;
      }

      .footer-container {
        left: 70px;
      }
    }*/
  }

  @include media-up(lg) {
    // Defaults for desktops


    // Variations for desktops
      // PC电脑展开侧边栏
    /*&.-sidebar-compact-desktop {
      .header-container {
        left: 70px;
      }

      .sidebar-container {
        width: 70px;
      }

      .content-container {
        margin-left: 70px;
      }

      .footer-container {
        left: 70px;
      }
    }*/

      // PC电脑关闭侧边栏
    &.-sidebar-closed-desktop {
      .header-container {
        left: 0;
      }

      .sidebar-container {
        left: calc(-1 * 240px);
      }

      .content-container {
        margin-left: 0;
      }

      .footer-container {
        left: 0;
      }
    }


    /*&.-sidebar-closed-desktop.-sidebar-compact-desktop {
      .sidebar-container {
        left: calc(-1 * 70px);
      }
    }*/
  }



  // Sidebar overlay
  @mixin sidebar-open-overlay() {
    .sidebar-overlay {
      left: 0;
      opacity: 1;
    }

    // Blur out the content
    .header-container,
    .content-container,
    .footer-container {
      filter: blur(2px);
    }
  }

  // By default on mobiles and tablets the sidebar is closed
  // Add this class to open the sidebar
  &.-sidebar-open-mobile {
    @include media-down(sm) {
      @include sidebar-open-overlay();
    }
  }

  &.-sidebar-open-tablet/*:not(.-sidebar-compact-tablet)*/ {
    @include media(md) {
      @include sidebar-open-overlay();
    }
  }

  /*&.-sidebar-compact-tablet.-sidebar-nav-open {
    @include media(md) {
      @include sidebar-open-overlay();
    }
  }*/

  /*&.-sidebar-compact-desktop.-sidebar-nav-open {
    @include media-up(lg) {
      @include sidebar-open-overlay();
    }
  }*/


  // 固定头部
  &.-header-fixed {
    .header-container {
      position: fixed;
    }

    &.-customize-open {
      .header-container {
        left: calc(280px + 240px);
        right: calc(-1 * 280px);
      }

      @include media-down(sm) {
        .header-container {
          left: 0;
          right: 0;
        }
      }

      @include media(md) {
        .header-container {
          left: 280px;
        }
        /*&.-sidebar-compact-tablet.-sidebar-open-tablet {
          .header-container {
            left: calc(280px + 70px);
          }
        }*/
      }

      @include media-up(lg) {
        /*&.-sidebar-compact-desktop:not(.-sidebar-closed-desktop) {
          .header-container {
            left: calc(280px + 70px);
          }
        }*/

        &.-sidebar-closed-desktop {
          .header-container {
            left: 280px;
          }
        }
      }

    }
  }
    // 固定 底部
  &.-footer-fixed {
    .footer-container {
      position: fixed;
    }

    &.-customize-open {
      .footer-container {
        left: calc(280px + 240px);
        right: calc(-1 * 280px);
      }

      @include media-down(sm) {
        .footer-container {
          left: 0;
          right: 0;
        }
      }

      @include media(md) {
        .footer-container {
          left: 280px;
        }
        /*&.-sidebar-compact-tablet.-sidebar-open-tablet {
          .footer-container {
            left: calc(280px + 70px);
          }
        }*/
      }

      @include media-up(lg) {
        /*&.-sidebar-compact-desktop:not(.-sidebar-closed-desktop) {
          .footer-container {
            left: calc(280px + 70px);
          }
        }*/

        &.-sidebar-closed-desktop {
          .footer-container {
            left: 280px;
          }
        }
      }

    }
  }
    // 固定 移动设备头部
  &.-header-fixed-mobile {
    @include media-down(sm) {
      .header-container {
        position: fixed;
      }
    }
  }

}
